<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>

  </div>

</body>
<script>

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    //模版数据创建之前，就是app实例创建之前
    beforeCreate: function () {
      console.log('beforeCreate')
    },

    //模版数据创建之后，就是app实例创建之后
    //可以访问data数据
    //获取接口数据的点
    created: function () {
      console.log('created')
    },


    //html挂载之前,渲染之前，访问不到dom元素
    beforeMount: function () {
      console.log('beforeMount')
    },
    //html挂载之后，渲染之后，访问dom元素
    mounted: function () {
      console.log('mounted')
    },

    //数据更新之前,数据修改了 dom没有修改
    beforeUpdate: function () {
      console.log('beforeUpdate')
    },

    //数据更新之后,都修改了
    updated: function () {
      console.log('updated')
    },


    //组件销毁之前 通常清理定时器 延时器 提升性能
    beforeDestroy: function () {
      console.log('beforeDestroy')
    },
    destroyed: function () {
      console.log('destroyed')
    }
  })

</script>

</html>